<!-- prettier-ignore -->
<template>
  <div class="address-segment">
    <!--统计面板部分-->
    <div>
      <el-row :gutter="12">
        <el-col v-for="(item,index) in cardList" :key="index" :span="6">
          <div class="card">
            <div class="card-info">
              <div class="card-info-title">{{item.title}}</div>
              <div class="card-info-content">
                <span :style="{color: item.color}" class="card-info-content-number">{{item.num}}</span>
                个
              </div>
            </div>
            <img :src="require(`@/assets/images/addressSegment/${item.img}.png`)" alt="" class="card-img">
          </div>
        </el-col>
      </el-row>
    </div>

    <!--列表查询部分-->
    <div class="query-list">
      <el-form :inline="true" class="demo-form-inline">
        <div class="query-box">
          <el-form-item label="任务名称：">
            <el-input v-model="taskName"></el-input>
          </el-form-item>
          <el-form-item label="数据范围：">
            <!--<el-cascader v-model="taskRange" :props="cityProps" clearable></el-cascader>-->
            <district-select v-model="taskRange"></district-select>
          </el-form-item>
          <el-form-item label="创建人：">
            <el-input v-model="taskCreator"></el-input>
          </el-form-item>
          <el-form-item label="任务状态：">
            <el-select v-model="taskStatus">
              <el-option value="正在运行"></el-option>
              <el-option value="已完成"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" @click="searchTask">搜索</el-button>
            <el-button type="primary" @click="createTask">创建分词任务</el-button>
          </el-form-item>
        </div>
      </el-form>
      <el-table :data="taskTableData" header-row-class-name="table-header" max-height="550px" stripe>
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="任务名称" prop="name"></el-table-column>
        <el-table-column align="center" label="数据范围" prop="source"></el-table-column>
        <el-table-column align="center" label="分词条数" prop="count"></el-table-column>
        <el-table-column align="center" label="创建人" prop="user"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="createTime" width="160"></el-table-column>
        <el-table-column align="center" label="完成时间" prop="updateTime" width="160"></el-table-column>
        <el-table-column align="center" label="分词通过率">
          <template slot-scope="{row}">
            <span v-if="row.status === '已完成'">100%</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="AI修正数量">
          <template slot-scope="{row}">
            <span v-if="row.status === '已完成'">{{Math.ceil(row.count - row.count * row.pass)}}条</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" prop="status">
          <template slot-scope="{row}">
            <el-tag v-if="row.status === '已完成'" type="success">{{row.status}}</el-tag>
            <el-tag v-if="row.status === '正在运行'">{{row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="openTaskDetail(row)">详情</el-button>
            <el-button style="color:red" type="text" @click="deleteRecord(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :page-size="listQuery.size" :total="total" background layout="total,prev, pager, next"
                     style="text-align: right;margin-top: 12px" @current-change="pageChange"></el-pagination>
    </div>
    <task-create v-if="createShow" :createShow.sync="createShow"></task-create>
    <transition name="el-zoom-in-top">
      <div v-show="detailShow" class="detail-box">
        <router-view :row-data="rowData"></router-view>
      </div>
    </transition>
  </div>
</template>

<script>
import axios from "axios";

import taskCreate from "./taskCreate.vue";
import taskResult from "./taskResult.vue";
import districtSelect from '@/views/oneCodeAccess/districtSelect.vue';
export default {
  name: "addressSegment",
  components: { taskCreate, taskResult,districtSelect },
  data() {
    return {
      detailShow: false,
      createShow: false,
      taskName:'',
      taskRange:[],
      taskCreator:'',
      taskStatus:'',
      total: 0,
      taskTableData: [],
      detailActive: {},
      cityProps: {
        value: "name",
        label: "name",
        checkStrictly: true,
        children: "districts",
        lazy: true,
        lazyLoad: this.getCityProps,
      },
      statisticalValue:{
        Tasking: 0,
        allTask: 0,
        allList: 0,
        ending: 0
      },
      listQuery:{
        name:'',
        source:'',
        user:'',
        status:'',
        page:1,
        size:10,
        type:1
      },
      rowData:null
    };
  },
  computed:{
    cardList(){
      return [
        {
          title: "全部任务",
          num: this.statisticalValue.allTask,
          color: "#4C94FE",
          img: "all-task",
        },
        {
          title: "进行中的任务",
          num: this.statisticalValue.Tasking,
          color: "#6962FE",
          img: "running-task",
        },
        {
          title: "已完成任务",
          num: this.statisticalValue.ending,
          color: "#30C68A",
          img: "completed-task",
        },
        {
          title: "累计处理分词",
          num: this.statisticalValue.allList,
          color: "#F0700F",
          img: "wait-task",
        }
      ]
    }
  },
  watch: {
    $route: {
      handler(val) {
        this.detailShow = val.path.indexOf("/address-segment/detail") > -1;
      },
      immediate: true,
    },
  },
  created(){
    if (this.$route.path !== '/address-segment'){
      this.$router.push('/address-segment')
    }
    this.getStatistics()
    this.getTaskTableData()
  },
  methods: {
    async deleteRecord(data){
      try{
        const res = await axios.get(`${window.baseUrl}/address/task/delete`,{
          params:{
            id: data.id
          }
        })
        if (res.status === 200){
          this.getTaskTableData()
          this.getStatistics()
        }
      }catch(error){
        console.log(error);
      }
    },
    // 刷新列表
    updateList(){
      this.taskName = ''
      this.taskRange = []
      this.taskCreator = ''
      this.taskStatus = ''
      this.searchTask()
      this.getStatistics()
    },
    // 搜索
    searchTask(){
      const {taskName: name, taskRange, taskCreator: user, taskStatus: status} = this
      const source = taskRange.join(' / ')
      this.listQuery = {...this.listQuery,name,source,user,status}
      this.getTaskTableData()
    },
    // 页面切换
    pageChange(pageNum){
      this.listQuery.page = pageNum
      this.getTaskTableData()
    },
    // 获取统计数值
    async getStatistics(){
      try{
        const res = await axios.post(`${window.baseUrl}/address/task/statistics`,{
          type:1
        })
        this.statisticalValue = res.data.data
      }catch(err){
        console.error(err);
      }
    },

    // 获取列表数据
    async getTaskTableData(){
      try {
        const res = await axios.get(`${window.baseUrl}/address/task/list`,{
          params:this.listQuery
        })
        this.taskTableData = res.data.data.records
        this.total = res.data.data.total
      }catch(err){
        console.error(err);
      }
    },
    // 获取城市信息
    async getCityProps(node, resolve) {
      let nodes = [];
      let keywords = ''
      if (node.level === 0) {
        keywords = '黄冈市'
      } else {
        keywords = node.value
      }
      let res = await axios.get(
        "https://restapi.amap.com/v3/config/district",
        {
          params: {
            keywords,
            subdistrict: 2,
            key: "4bb9d93c9b35ffdc9a5177d230394f23",
          },
        }
      );
      res.data.districts[0].districts.forEach((item) => {
        const leaf = !item.districts.length;
        nodes.push({ ...item,leaf });
      });
      resolve(nodes)
    },
    openTaskDetail(data) {
      this.rowData = data
      this.$router.push("/address-segment/detail/" + data.id);
    },
    createTask() {
      this.createShow = true;
    },
  },
};
</script>

<style lang="less" scoped>
.address-segment {
  height: 100%;
  position: relative;
  .card {
    background: #fff;
    width: 100%;
    height: 144px;
    padding: 25px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    &-info {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &-title {
        font-size: 24px;
        font-weight: 500;
        color: #333;
      }
      &-content {
        font-size: 16px;
        color: #666;
        vertical-align: bottom;
        &-number {
          font-size: 36px;
          margin-right: 16px;
          font-style: italic;
        }
      }
    }
    &-img {
      width: 86px;
      height: 86px;
    }
  }
  .query-list {
    width: 100%;
    height: calc(100% - 156px);
    background: #fff;
    padding: 16px;
    .query-box {
      display: flex;
      justify-content: space-between;
    }
  }
  .detail-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background: #e4e8ee;
  }
}
</style>
<style lang="less">
</style>